<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

  <style>
body.dragging, body.dragging * {
  cursor: move !important;
}

.dragged {
  position: absolute
  top: 0
  opacity: .5
  z-index: 2000
}
li {
    display: block;
    margin: 5px;
    padding: 5px;
    border: 1px solid #CCC;
    color: $linkColor;
    background: $grayLighter;
}
li.placeholder {
    position: relative;
    margin: 0;
    padding: 0;
    border: none;
}
li.placeholder:before {
      position: absolute;
      content: "";
      width: 0;
      height: 0;
      margin-top: -5px;
      left: -5px;
      top: -4px;
      border: 5px solid transparent;
      border-right: none;
}
ol.example li.placeholder {
  position: relative;
  /** More li styles **/
}
ol.example li.placeholder:before {
  position: absolute;
  /** Define arrowhead **/
}
ol.vertical {
  margin: 0 0 9px 0
  min-height: 10px
}
  </style>
</head>
<body>
<ol class='example'>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>
<script src='jquery-sortable.js'></script>
<script>
$(function  () {
  $("ol.example").sortable()
})
</script>
 
</body>
</html>